<template>
  <ul @mouseenter="showBtn" @mouseleave="showBtn" >
      <el-button class="left" 
        icon="el-icon-arrow-left" 
        circle type="info" plain
        v-show="isShow"
        @click="changeLi2"
      ></el-button>
      <el-button class="right" 
        icon="el-icon-arrow-right" 
        circle type="info" plain
        v-show="isShow"
        @click="changeLi1"
      ></el-button>
      <li :class="[h1 ? '' : this.liClassName]"
      >
          <img src="../common/img/s-slider1.jpg" alt="">
          <img src="../common/img/s-slider2.jpg" alt="">
          <img src="../common/img/s-slider3.jpg" alt="">
      </li>
        <li :class="[h2 ? '' : this.liClassName]"
        >
            <img src="../common/img/s-slider4.jpg" alt="">
            <img src="../common/img/s-slider5.jpg" alt="">
            <img src="../common/img/s-slider6.jpg" alt=""> 
        </li>
      <li :class="[h3 ? '' : this.liClassName]"
      >
          <img src="../common/img/s-slider7.jpg" alt="">
          <img src="../common/img/s-slider8.jpg" alt="">
          <img src="../common/img/s-slider9.jpg" alt="">
      </li>
  </ul>
</template>

<script>
export default {
    name:'SliderList',
    data() {
        return {
            isShow:false,
            h1:true,
            h2:false,
            h3:false,
            liClassName:'hidden'
        }
    },
    methods: {
        changeLi1(){
            if (this.h1==true) {
                this.h1 = !this.h1
                this.h2 =!this.h2
            }else if (this.h2==true) {
                this.h2 = !this.h2
                this.h3 = !this.h3
            }else{
                this.h3 = !this.h3
                this.h1 = !this.h1
            }
        },
        changeLi2(){
            if (this.h1==true) {
                this.h1 = !this.h1
                this.h3 =!this.h3
            }else if (this.h3==true) {
                this.h3 = !this.h3
                this.h2 = !this.h2
            }else{
                this.h2 = !this.h2
                this.h1 = !this.h1
            }
        },
        showBtn(){
            this.isShow = !this.isShow
        }
    },
}
</script>

<style scoped>
    ul{
        height: 470px;
        padding: 0;
    }
    ul li{
        float: left;
        list-style: none;
    }
    img{
        width: 190px;
    }
    li>img:nth-child(2){
        margin: 8px 0;
    }
    .hidden{
        display: none;
    }
    button{
        margin-right: 20px;
        position: absolute;
        outline: none;
    }
    .left{
        transform: translate(5px,220px);
    }
    .right{
        transform: translate(150px,220px);
    }
    .el-button--info.is-plain{
        color: #eee;
        background: rgba(31,45,61,.11) ;
        border-color: transparent;
    }
    .el-button.is-circle{
        padding: 5px;
    }
    .el-button{
        border: 1px solid transparent;
    }
</style>